<template>
	<view>
		<view class="view-wp">
			<u--image :src="selectImg" width="582rpx" height="240rpx" :radius="8" mode="aspectFill"></u--image>
			<view class="left-price-box">
				<view class="left-price">
					{{model.price||"8888"}}
				</view>
				<view class="left-unit">
					元
				</view>
			</view>
			<view class="left-name">
				{{model.name||"礼品"}}代金券
			</view>
		</view>
		<view class="my-shop-add-form">
			<u-form errorType="border-bottom" labelPosition="top" :model="model" ref="uForm" labelWidth='180'
				labelAlign='left' :labelStyle="{fontSize: '26rpx',color: '#1D2129',height:'80rpx',lineHeight:'80rpx'}">

				<u-form-item label="代金券名称" prop="name" borderBottom class='formItemWp'>
					<u-input placeholder="请输入代金券名称(5字内)" maxlength="5" suffixIconStyle="color: #909399;font-size:30rpx"
						border="none" v-model="model.name" clearable>
					</u-input>
				</u-form-item>
				<u-form-item label="代金券价值" prop="price" borderBottom class='formItemWp'>
					<u-input placeholder="请输入代金券价值(4字内)" maxlength="4" suffixIconStyle="color: #909399;font-size:30rpx"
						border="none" v-model="model.price" clearable>
					</u-input>
				</u-form-item>

			</u-form>
			<view class="coupon-title">
				代金券样式
			</view>
			<view class="img-list-box">
				<scroll-view style="white-space: nowrap;" :scroll-x="true" :scroll-with-animation="true">
					<view :id="`id-${index}`" class="img-list-item" v-for="(item,index) in imgs" :key="index"
						@click="changeCardStyle(item,index)">
						<view class="img-list-mask" v-if="acvtiveIndex==index">
							<img style="opacity: 0.4;"
								src="https://file.casugn.com/storecompcard//vDMG9DF1LOKpd0662a88acafe3f7ebf33a8d7107ac08_1663641032654.png"
								alt="" />
						</view>
						<img class="img-item" :src="item.image" alt="" />
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bottom-box">
			<u-button @click="add" :custom-style="{
			  background: '#276aee',
			  color: '#fff',
			  width: '682rpx',
			  border:'none'
			}">确认</u-button>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				model: {
					name: '',
					price: '',

				},
				rules: {
					name: [{
						required: true,
						message: '请输入代金券名称',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入代金券价值',
						trigger: 'blur',
					}]
				},
				acvtiveIndex: 0,
				imgs: [],
				selectImg: ''

			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			this.getImgs()
		},

		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			changeCardStyle(item, index) {
				console.log(item, index)
				this.acvtiveIndex = index
				this.selectImg = item.image
			},
			//获取图片素材
			async getImgs() {
				let res = await this.$api.getShopImgs({
					type: 1,
					pageSize: 30
				})
				if (res.success) {
					this.imgs = res.result.records || []
					this.selectImg = this.imgs[0].image
				}
			},
			add() {
				this.$refs.uForm.validate().then(valid => {
					console.log(valid)
					if (this.acvtiveIndex == -1) {
						return uni.$u.toast('请选择代金券样式')
					}
					const {
						openId
					} = this.userInfo
					let data = {
						openId: openId,
						name: this.model.name,
						price: this.model.price,
						image: this.selectImg
					}
					this.$api.createVoucher(data).then(res => {
						console.log(res)
						if (res.success) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
							uni.navigateBack()
						}
					})



				}).catch(errors => {
					console.log(errors);
					uni.$u.toast('内容填写有误,请修改或补充')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-wp {
		width: 710rpx;
		margin: 20rpx auto;
		position: relative;

		.left-name {
			position: absolute;
			font-size: 50rpx;
			font-weight: 500;
			line-height: 50rpx;
			bottom: 32rpx;
			left: 40rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

		}

		.left-price-box {
			display: flex;
			align-items: flex-end;
			position: absolute;
			top: 22rpx;
			left: 40rpx;

			.left-price {

				font-size: 110rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				line-height: 110rpx;
				background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}

			.left-unit {
				width: 35rpx;
				height: 35rpx;
				background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
				font-size: 25rpx;
				font-weight: 400;
				color: #922126;
				line-height: 34rpx;
				border-radius: 50%;
				text-align: center;
				position: relative;
				top: -2rpx;
			}

		}


		image {
			border-radius: 5rpx;
			width: 140rpx;
			height: 140rpx;
		}
	}

	.my-shop-add-form {
		margin: 32rpx;

		.uploadWp {
			width: 218rpx;
			height: 218rpx;
			background-color: #f7f8fa;
			justify-content: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.coupon-title {
			width: 130rpx;
			height: 80rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #1D2129;
			line-height: 80rpx;

		}

		.img-list-box {
			display: flex;
			overflow-x: scroll;
			flex-wrap: nowrap;



			.img-list-item {
				display: inline-block;
				position: relative;
				margin-right: 32rpx;

				.img-list-mask {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;

					background: rgba(0, 0, 0, 0.5);
					text-align: center;

					img {
						width: 50upx;
						height: 50upx;
						position: relative;
						top: 50%;
						transform: translateY(-25upx);
					}
				}

				.img-item {
					width: 340rpx;
					height: 160rpx;

				}
			}

			.img-list-item:last {
				margin-right: 0;
			}

		}


	}
</style>